<template>
    <div>
        <van-nav-bar
            title="标题"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />
        <van-field v-model="storeUser.user.phone" label="当前手机号"  />

        <van-field v-model="tel" type="tel" label="手机号" placeholder="请输入要更换的手机号"/>
        <van-field
            v-model="sms"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
        >
            <template #button>
                <van-button size="small" type="primary" @click="sendCode">发送验证码</van-button>
            </template>
        </van-field>
        <button @click="eqCode">下一步</button>
    </div>
</template>
<script setup>
import {ref} from "vue";
import {useStore} from "../../pinia/index.js";
import {get} from "../../util/request.js";
import {showToast} from "vant";

const storeUser=useStore();
const tel = ref();
const sms = ref();
const onClickLeft = () => history.back();
const sendCode = () => {
    //发送短信验证码,和注册验证码逻辑一样
    get("sms/sendrcode",{phone:tel.value}).then(res=>{
        if(res.code==0){
            console.log(res.data)
            showToast('验证码已发送:'  + '，请查收！');
        }else {
            showToast(res.data);
        }
    })
}
const eqCode = () =>{
    get("user/editPhone",{code:sms.value,phone:tel.value}).then(r=>{
        if(r.code==0){
            showToast('修改手机号成功');
            storeUser.setUser(r.data)
        }else {
            showToast('修改手机号失败');
        }
    })
}
</script>

<style scoped>

</style>